<template>
  <div class="divisional">
    <div class="search_box">
    <el-row :gutter="20">


          <el-col :span="6" v-for="(item,index) in list_1" :key="index">
            <span class="inpText">{{item.name}}</span>
            <el-input v-model.trim="item.input_val" size="small" placeholder="请输入内容" style="width: 60%;"></el-input>
          </el-col>
          <!-- <el-col :span="6">
            <span class="inpText">是否首次逾期</span>
            <el-select v-model="isFirstIssue" size="small" placeholder="请选择" style="width: 56%;">

              <el-option
                v-for="item in yuqiOptions"
                :key="item.index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col> -->

          <el-col :span="6">
            <span class="inpText">风险等级</span>
            <el-select v-model="risklevel" size="small" placeholder="请选择" style="width: 60%;">

              <el-option
                v-for="item in risklevelOptions"
                :key="item.index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6" id="yqdj">
            <span class="inpText">逾期等级</span>

              <el-select v-model="overdueLevelF" size="small" placeholder="请选择" style="width: 26%;">
                <el-option
                  v-for="item in overdueLevelOptions"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <span>- -</span>
              <el-select v-model="overdue_levelS" size="small" placeholder="请选择" style="width: 26%;">
                <el-option
                  v-for="item in overdueLevelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>

          </el-col>

          <el-col :span="6" style="padding: 48px">
            <el-button size="small" type="primary" @click="search">查询</el-button>
            <el-button size="small" type="primary" @click="reset">重置</el-button>
            <el-button @click="reDivision()" type="primary" size="small" >再次分案</el-button>
          </el-col>


    </el-row>
    </div>
    <el-row :gutter="20">
      <el-col :span="24">

        <el-table
          v-loading="loading"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(212, 216, 206, 1)"
          ref="pageTable"
          :data="tableData"
          :header-cell-style="{background:'LightYellow	',color:'black'}"
          max-height="400"
          style="width: 100%"
        @selection-change="handleSelectionChange" :row-key="getRowKeys"
        >
          <el-table-column type="selection" :selectable='disableCheck'></el-table-column>
          <!-- <el-table-column prop="serialNumber" label="案件流水号" width></el-table-column>
          <el-table-column prop="bank" label="所属银行" width></el-table-column> -->
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="customerId" label="客户号"></el-table-column>
          <el-table-column prop="contractNum" label="贷款合同号"></el-table-column>
          <el-table-column prop="peopleId" label="身份证号" :formatter="hidInfo"></el-table-column>
          <el-table-column prop="isFirstIssue" label="是否首次逾期" :formatter="IsFirst"></el-table-column>
          <!-- <el-table-column prop="collectionTimes" label="催收次数"></el-table-column> -->
          <el-table-column prop="riskLevel" label="风险等级"></el-table-column>
          <el-table-column prop="overdueGrade" label="逾期等级"></el-table-column>
          <!-- <el-table-column prop="outbound" label="催收方式" :formatter="OutboundToChinese"></el-table-column> -->
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
              <!-- <el-button @click="reDivision(scope.row)" type="text" size="small">再次分案</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="pageBox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog :visible.sync="isInfodetail" width="75%">
      <span slot="title">信息详情</span>
      <div class="mainInfoBox">
        <div class="infoBox" v-for="(item,index) in detailInfo" :key="index">
          <label for>{{item.label}}:</label>
          <el-input v-model="item.value" size="small" disabled placeholder="请输入内容"></el-input>
        </div>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="showTableTwo" width="75%">
      <span slot="title">再次分案</span>
      <div style="min-height: 300px;max-height: 500px;">
          <el-table
            ref="tableTwo"
            :data="tableTwodata"
            :header-cell-style="{background:'silver',color:'#606266'}"
            max-height="400"
            style="width: 100%"
            @selection-change="handleSelectionChangeTwo"
          >
            <el-table-column type="selection" checked="true" ></el-table-column>
            <el-table-column prop="serialNumber" label="案件流水号" width></el-table-column>
            <el-table-column prop="bank" label="所属银行" width></el-table-column>
            <el-table-column prop="customerId" label="客户号"></el-table-column>
            <el-table-column prop="contractNum" label="贷款合同号"></el-table-column>
            <el-table-column prop="peopleId" label="身份证号"></el-table-column>
            <el-table-column prop="isFirstIssue" label="是否首次逾期" :formatter="IsFirst"></el-table-column>
            <el-table-column prop="collectionTimes" label="催收次数"></el-table-column>
            <el-table-column prop="riskLevel" label="风险等级"></el-table-column>
            <el-table-column prop="overdueGrade" label="逾期等级"></el-table-column>
            <el-table-column prop="outbound" label="催收方式" :formatter="OutboundToChinese"></el-table-column>
          </el-table>
      </div>

      <span slot="footer" class="dialog-footer" style="white-space: nowrap;">
        <div class="v_box" style="display: inline-block;margin-right: 20px;">
          <label for>指定催收方式:</label>
          <el-select v-model="reoutbound" size="small" @change="changeRedivion" placeholder="请选择">
            <el-option
              v-for="item in reoutboundOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>

        <div class="v_box" v-show="showSmsTemplate" style="display: inline-block;margin-right: 20px;">
          <label for>指定短信模板:</label>
          <el-select v-model="reSmsTemplate" size="small"  placeholder="请选择">
            <el-option
              v-for="item in smsTemplateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div style="display: inline-block;">
          <el-button type="primary" @click="saveRedivision">下发分案</el-button>
          <el-button type="primary" @click="clearTableTwo">取消</el-button>
        </div>

      </span>
    </el-dialog>


    <el-dialog :visible.sync="isRedivision" width="75%">
      <span slot="title">再次分案</span>
      <div class="mainInfoBox" style="height: auto;">
        <div class="v_box">
          <label for>指定催收方式:</label>
          <el-select v-model="reoutbound" size="small" @change="changeRedivion" placeholder="请选择">
            <el-option
              v-for="item in outboundOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>

        <div class="v_box" v-show="showSmsTemplate" >
          <label for>指定短信模板:</label>
          <el-select v-model="reSmsTemplate" size="small"  placeholder="请选择">
            <el-option
              v-for="item in smsTemplateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveRedivision">保存</el-button>
          <el-button type="primary" @click="cancelRe">取 消</el-button>
        </span>
      </div>
      <div class="mainInfoBox">
        <div class="infoBox" v-for="(item,index) in detailInfo" :key="index">
          <label for>{{item.label}}:</label>
          <el-input v-model="item.value" size="small" disabled placeholder="请输入内容"></el-input>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {cmcUrl} from '../../../static/baseUrl'
import { Message } from "element-ui";
export default {
  data() {
    return {
      loading: false,
      tableTwodata: [],
      twoSelect: [],
      showTableTwo: false,
      allSelect: [],
      pageSelect: [],
      getRowKeys(row) {
        return row.id;
      },
      reSmsTemplate: "",
      showSmsTemplate: false,
      smsTemplateOptions: [{
          label: 'o1',
          value: 'o1',
        },{
          label: 'o2',
          value: 'o2',
        },{
          label: 'o3',
          value: 'o3',
        },
      ],
      reoutbound: "3",
      isRedivision: false,
      divisionID: "",
      isInfodetail: false,
      currentPage: 1,
      total: 0,
      pageSize: 5,
      list_1: [
        {
          name: "所属银行",
          input_val: "",
        },
        {
          name: "贷款合同号",
          input_val: "",
        },
        {
          name: "身份证号",
          input_val: "",
        },
        {
          name: "客户姓名",
          input_val: "",
        },
        {
          name: "手   机   号",
          input_val: "",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      tableData: [],
      //   逾期选择
      isFirstIssue: "",
      yuqiOptions: this.GLOBAL.firstOptions,
      //   催收
      cuishouNum: "",
      //   催收方式
      outbound: "",
      outboundOptions: this.GLOBAL.outboundOptions,
      reoutboundOptions: [
          {
            label: "人工客服",
            value: "3",
          },
      ],
      //   风险等级
      risklevel: "",
      risklevelOptions: this.GLOBAL.risklevelOptions,
      //   逾期等级
      overdueLevelF: "",
      overdue_levelS: "",
      overdueLevelOptions: this.GLOBAL.overdueLevelOptions,
      //   详情
      detailInfo: [],
      //新老网贷
      isNewOptions: this.GLOBAL.newOldOptions,
      //分案方式
      divisionOptions:this.GLOBAL.divisionOptions,
      //催收优先级
      priorityOptions: this.GLOBAL.priorityOptions,
      //详情页面不显示字段
      hiddenF: [{
          value: "reservedFields2",
          text: "",
        },{
          value: "reservedFields3",
          text: "",
        },{
          value: "status",
          text: "",
        },{
          value: "outbound",
          text: "",
        }
      ],
      //分案状态
      stateOp: this.GLOBAL.stateOptions,
    };
  },
  created() {

    this.checkInfo();
  },
  methods: {
    search(){
      this.currentPage = 1;

      this.checkInfo();
    },
    //清空TableTwo数据
    clearTableTwo(){
      this.pageSelect = [];
      this.$refs.pageTable.clearSelection();

      this.allSelect = [];
      this.tableTwodata = [];
      this.showTableTwo = false;
    },
    //tableTwo   复选框触发事件
    handleSelectionChangeTwo(val){
      this.twoSelect = val;
    },
    //禁用部分复选框 比如 分案结果为 人工客服 的数据不能再次分案
    disableCheck(rowdata,index){
      if(rowdata.outbound=='3'){
        return false;
      }else {
        return true;
      }
    },
    //复选框触发事件
    handleSelectionChange(val) {
        //console.log("val",val);
        //val为当前页选中项

        if(this.pageSelect && this.pageSelect.length>0){
          this.pageSelect.map((vv,index) => {
            if(vv!=""){
              let mm = val.indexOf(vv);
              console.log("mm==",mm);
              if(mm === -1){
                //当前页的选中项不包含，则从总的选中项中移除
                this.allSelect.map((item,index) => {
                  if(item.id == vv.id){
                    this.allSelect.splice(index,1);
                  }
                });
              }
            }
          });
        }
        this.pageSelect = val;
        this.allSelect = this.uniqueArr(this.allSelect,this.pageSelect);
    },
    //复选框返显选中
    rowSelectChecked(){
      this.pageSelect = [];
      console.log("this.allSelect??  ",this.allSelect);
      if(this.tableData != null){
        for (let j = 0; j < this.tableData.length; j++){
          for(let x = 0; x < this.allSelect.length; x++){
            if(this.allSelect[x].id == this.tableData[j].id){
              if(this.$refs.pageTable != undefined){
                this.$refs.pageTable.toggleRowSelection(this.tableData[j], true);
                //toggleRowSelection，会触发handleSelectionChange
              }
            }
          }
        }
      }
    },
    /**数组合并去重
     * @param {Object} arr1
     * @param {Object} arr2
     */
    uniqueArr(arr1,arr2) {
        let temp = [];
        arr2.map((item,index) => {
          if(item!=null && item!=""){
            let id1 = item.id;
            let ff = false;
            arr1.map((val,ii) => {
              if(val!=null && val!=""){
                let id2 = val.id;
                if(id1==id2){
                  ff = true;
                }
              }
            });
            if(!ff){
              temp.push(item);
            }
          }
        });
        //合并两个数组
        arr1.push(...temp);//或者arr1 = [...arr1,...arr2]
        let arr3 = Array.from(new Set(arr1))//let arr3 = [...new Set(arr1)]
        return arr3;
    },
    /**数组按指定key排序
     * @param {Object} arr
     * @param {Object} key
     */
    sortByKey(arr, key){
      return arr.sort(function(a,b){
        let x = a[key];
        let y = b[key];
        return ((x<y)?-1:((x>y)?1:0))
      });
    },
    IsNewLoan(row){
      let vv = row.newAndOldLoansn;
      let ttt = this.isNewOptions.find((element) => (element.value==vv));
      return ttt?ttt.text:"";
    },
    IsFirst(row){
      let vv = row.isFirstIssue;
      let ttt = this.yuqiOptions.find((element) => (element.value==vv));
      return ttt?ttt.label:"";
    },
    OutboundToChinese(row){
      let vv = row.outbound;
      let ttt = this.outboundOptions.find((element) => (element.value==vv));
      return ttt?ttt.label:"";
    },
    IsDivisionOptions(data){
      let vv = data.division;
      let ttt = this.outboundOptions.find((element) => (element.value==vv));
      return ttt?ttt.text:"";
    },
    isPriorityOptions(data){
      let vv = data.collectionPriority;
      let ttt = this.outboundOptions.find((element) => (element.value==vv));
      return ttt?ttt.text:"";
    },
    transToState(data){
      let vv = data.state;
      let ttt = this.stateOp.find((element) => (element.value==vv));
      return ttt?ttt.text:"";
    },
    handleCurrentChange(data) {
      this.currentPage = data;
      this.checkInfo();
    },
    handleSizeChange(data) {
      console.log(data, "handleSizeChange");
      this.pageSize = data;
      this.checkInfo();
    },
    handleInfoDetail(val) {
      switch (val) {
        case "phoneNum":
          return "手机号";
        case "riskLecvel":
          return "风险等级";
        case "serialNumber":
          return "案件流水号";
        case "bank":
          return "所属银行";
        case "customerId":
          return "客户号";
        case "contractNum":
          return "贷款合同号";
        case "peopleId":
          return "身份证号";
        case "isFirstIssue":
          return "是否首逾";
        case "collectionTimes":
          return "催收次数";
        case "riskLevel":
          return "风险等级";
        case "outbound":
          return "催收方式";
        case "id":
          return "ID";
        case "receiptNum":
          return "贷款借据号";
        case "name":
          return "姓名";
        case "age":
          return "年龄";
        case "sex":
          return "性别";
        case "education":
          return "学历";
        case "maritalStatus":
          return "婚姻状况";
        case "overdueAmount":
          return "逾期金额";
        case "overdueDay":
          return "逾期天数";
        case "overduePrincipal":
          return "逾期本金";
        case "productName":
          return "产品名称";
        case "applicationTime":
          return "申请时间";
        case "lateCharge":
          return "逾期罚息";
        case "customerLabel":
          return "客群细分标签";
        case "repaymentNum":
          return "还款账号";
        case "collectionPriority":
          return "催收优先等级";
        case "interestRefund":
          return "退罚息";
        case "newAndOldLoansn":
          return "新老网贷";
        case "score":
          return "评分";
        case "state":
          return "状态";
        case "dataTime":
          return "数据时间";
        case "repaymentAmount":
          return "还款金额";
        case "repaymentDate":
          return "还款时间";
        case "scriptTemplate":
          return "话术模板";
        case "smsTemplate":
          return "短信模板";
        case "productCode":
          return "产品编码";
        case "assetSideCode":
          return "资产方编码";
        case "overdueGrade":
          return "逾期等级";
        case "division":
          return "分案方式";
        default:
          return val;
      }
    },
    codeToChinese(data){
      if(data.hasOwnProperty("isFirstIssue")){
        let tempb = this.IsFirst(data);
        this.$set(data,"isFirstIssue",tempb);
      }

      if(data.hasOwnProperty("outbound")){
        let tempc = this.OutboundToChinese(data);
        this.$set(data,"outbound",tempc);
      }

      if(data.hasOwnProperty("newAndOldLoansn")){
        let tempd = this.IsNewLoan(data);
        this.$set(data,"newAndOldLoansn",tempd);
      }

      if(data.hasOwnProperty("division")){
        let tempe = this.IsDivisionOptions(data);
        this.$set(data,"division",tempe);
      }

      if(data.hasOwnProperty("collectionPriority")){
        let tempf = this.isPriorityOptions(data);
        this.$set(data,"collectionPriority",tempf);
      }

      if(data.hasOwnProperty("state")){
        let tempg = this.transToState(data);
        this.$set(data,"state",tempg);
      }
    },
    //过滤详情中不需要显示字段
    filterHiddenF(data){
      console.log("data   ",data);
      Object.keys(this.hiddenF).forEach((item) => {
        let ss = this.hiddenF[item];
        console.log("ss   ",ss);
        this.$delete(data,ss.value);
      });
      return data;
    },
    handleClick(data) {
      console.log(data, "sss");
      this.detailInfo = [];
      this.detailInfo.splice(this.detailInfo.length);
      let temMap = JSON.parse(JSON.stringify(data));
      temMap = this.filterHiddenF(temMap);
      this.codeToChinese(temMap);
      Object.keys(temMap).forEach((item) => {
        let obj = {
          label: this.handleInfoDetail(item),
          value: temMap[item],
        };
        this.detailInfo.push(obj);
      });
      console.log(this.detailInfo, "this.detailInfo");
      this.isInfodetail = true;
    },
    reset() {
      this.list_1[0].input_val = "";
      this.list_1[1].input_val = "";
      this.list_1[2].input_val = "";
      this.list_1[3].input_val = "";
      this.list_1[4].input_val = "";
      this.isFirstIssue = "";
      this.risklevel = "";
      this.overdueLevelF = "";
      this.overdue_levelS = "";
    },
    checkInfo() {
    console.log(this.currentPage,'this.currentPage,')
      //   所属银行
      let bank = this.list_1[0].input_val;
      // 贷款合同号
      let contractNum = this.list_1[1].input_val;
      // 身份证
      let peopleId = this.list_1[2].input_val;
      // 客户姓名
      let name = this.list_1[3].input_val;
      // s手机号
      let phone = this.list_1[4].input_val;
      // 是否逾期
      let isFirstIssue = this.isFirstIssue;
      //   催收次数
      let collectionTimes = this.cuishouNum;
      //   催收方式
      let outbound = this.outbound;
      //   风险等级
      let riskLevel = this.risklevel;
      //   逾期等级
      if(this.overdueLevelF){
        if(!this.overdue_levelS){
          this.overdue_levelS = this.overdueLevelF;
        }
      }
      if(this.overdue_levelS){
        if(!this.overdueLevelF){
          this.overdueLevelF = this.overdue_levelS;
        }
      }
      let overdueLevelF = this.overdueLevelF;
      let overdueLevelS = this.overdue_levelS;

      this.loading = true;
      let options = {
        bank: bank,
        peopleId: peopleId,
        contractNum: contractNum,
        name: name,
        phoneNum: phone,
        //isFirstIssue: isFirstIssue+"",
        riskLevel: riskLevel,
        overdueLevelF: overdueLevelF,
        overdueLevelS: overdueLevelS,
        page: this.currentPage,
        pageSize: this.pageSize,
      };


      this.$axios({
        method: "post",
        url: `/CMC/out/source/list`,
        data: options,
      })
        .then((res) => {
          console.log(res, "查询数据");
          if (res.code == 200) {
            this.loading = false;
            this.tableData = res.data.list;
            this.total = Number(res.data.total);
          } else {
            console.error(res.message);
          }
        })
        .catch((err) => {});
    },
    //再次分案
    reDivision(){

      console.log("this.allSelect",this.allSelect);
      this.allSelect = this.uniqueArr(this.allSelect,this.pageSelect);

      if(this.allSelect && this.allSelect.length>0){
        //排序
        this.allSelect = this.sortByKey(this.allSelect,"id");
        this.tableTwodata = this.allSelect;
        this.showTableTwo = true;
      }else{
        Message.warning("请选择数据后操作！");
      }
    },
    changeRedivion(){
      let o_outbound = this.reoutbound;
      if(o_outbound=='1'){//短信
        this.showSmsTemplate = true;
      }else{
        this.showSmsTemplate = false;
        this.reSmsTemplate = "";
      }
    },
    //立即下发
    saveRedivision(){
      let idArr = [];
      let idStr = "";
      if(this.twoSelect && this.twoSelect.length>0){
        Object.keys(this.twoSelect).forEach((item)=>{
          let ttid = this.twoSelect[item].id;
          idArr.push(ttid);
        });
      }else{
        Message.warning("请再次选择要下发的数据！！");
        return false;
      }
      idStr = idArr.join();//join,默认用，分割
      console.log("idStr....",idStr);
      let n_outbound = this.reoutbound;
      if(n_outbound==undefined || n_outbound==""){
        Message.warning("重新分案的下发渠道不能为空！！");
        return false;
      };
      if(n_outbound=='1'){//短信
        if(this.reSmsTemplate == ""){
          Message.warning("下发短信渠道时，需指定短信模板！");
          return false;
        }
      };

      let param = new URLSearchParams();
      param.append("id", idStr);
      param.append("status", 2);//委外分案标记
      param.append("n_outbound", n_outbound);
      param.append("mode_type", this.reSmsTemplate);
      this.$axios({
        headers:{'Content-Type':'application/x-www-form-urlencoded'},
        method: "post",
        url: `/CMC/division/update/division/target`,
        data: param,
      })
        .then((res) => {
          console.log(res, "查询数据");
          if (res.code == 200) {
            Message.success("下发成功！");
            this.isRedivision = false;
          } else {
            console.error(res.message);
          }
        })
        .catch((err) => {});
    },
    //取消重新分案
    cancelRe(){
      this.detailInfo = [];
      this.isRedivision = false;
    },
  },
};
</script>
<style lang="scss" scoped>
  .divisional {
    /deep/ .el-row:nth-child(1) {
      width: 100%;
      height: 66px;
      // background: pink;
      padding: 0;
      margin: 0;

      .el-col {
        padding: 0;
        height: inherit;
        /* border: 1px solid slategrey; */
        box-sizing: border-box;
        overflow: hidden;

        div:nth-child(1) {
          width: 100%;
          height: inherit;
          //   background: yellowgreen;
          display: flex;
          flex-wrap: wrap;
          // justify-content: flex-start;
          justify-content: space-around;
          box-sizing: border-box;
          /* padding-left: 30px;
          padding-top: 40px; */
          overflow-y: auto;

          .v_box {
            width: 20%;
            height: 8vh;
            margin-left: 15px;
            margin-right: 40px;
            // margin-bottom: 10px;
            // background: chocolate;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 0;
            border: none;

            div {
              padding: 0;
            }

            &:nth-child(7) {

              .el-date-editor--daterange.el-input,
              .el-date-editor--daterange.el-input__inner,
              .el-date-editor--timerange.el-input,
              .el-date-editor--timerange.el-input__inner {
                width: 100%;
              }
            }

            &:last-child {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;

              .el-button {
                width: 70px;
                height: 30px;

                &:first-child {
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }
    }

    /deep/ .el-row:nth-child(2) {
      width: 100%;
     /* height: 60vh; */
      // background: pink;
      padding: 0;
      margin: 0;
      margin-top: 10px;

      table {
        tbody {
          tr {
            td {
              .cell {
                box-sizing: border-box;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: normal !important;
                line-height: inherit;
                //   padding-right: 10px;
              }
            }
          }
        }
      }
    }

    .pageBox {
      display: flex;
      width: 100%;
      justify-content: left;
      margin-top: 10px;
    }


    /deep/ .el-dialog {
      .mainInfoBox {
        width: 100%;
        height: 60vh;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        overflow-y: auto;

        .infoBox {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          height: 40px;
          width: 30%;

          label {
            width: 100px;
          }

          .el-input {
            flex: 1 1 auto;
          }
        }
      }
    }
  }


  .search_box {
    background: #fff;
    border-radius: 10px;
    padding: 40px 40px 140px 40px;
    margin: 0 0 20px 0;
  }

  .box_center {
    text-align: left;
  }

  .searchBtn {
    margin-left: 80px;
  }

  .search_box .inpText{
    width: 40px;
    justify-content: space-between;
  }
</style>
